<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>论坛分类</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .image {
            width: 150px;
            height: 150px;
            display: block;
        }
        .nth{
            border-style:solid;
            border-color:#e4e4e4;
            border-width: 0.1px;
        }
        .flex1{
            display: flex;
        }
        .p_no_margin{
            /*换行*/
            white-space: pre-wrap;
            margin: 0 0 5px 0;
            /*长单词折行*/
            word-wrap: break-word;
        }
        .centera{
            text-decoration: none;
            color: black;
        }
        .centera:hover{
            color: orange;
            text-decoration: orange;
            cursor: pointer;
        }
        .bottom {
            margin-top: 10px;
            line-height: 21px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <el-row>
                <el-col :span="8" v-for="(bar, index) in bars.slice(0,9)" :key="bar.bid">
                    <el-card :body-style="{ padding: '0px' }">
                        <div style="display: flex">
                            <div >
                                <img :src="bar.bimage" class="image">
                            </div>
                            <div style="padding: 14px;">
                                <span @click="goToLogin(bar.bid,TheUser.uid) " class="centera" style="font-weight: bold;font-size: 20px">{{ bar.bname }}</span>
                                <div class="bottom clearfix" >
                                    <p class="p_no_margin" >关注量:{{bar.fc}}</p>
                                    <p class="p_no_margin" >帖子数:{{bar.pc}}</p>
                                    <p class="p_no_margin" >经验值:{{bar.ex}}</p>
                                    <p class="p_no_margin" >等级:{{bar.level}}</p>
                                    <p class="p_no_margin" >坛称号:{{bar.levelname}}</p>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--        分页   -->
            <div style="display: flex; justify-content: center;">
                <el-pagination
                        :background="true"
                        layout="prev, pager, next"
                        :total="totalData.length"
                        :page-size="pageSize"
                        @current-change="Page"
                >
                </el-pagination>
            </div>
        </div>

    </div>

<script>
    new Vue({
        el:'#app',
        mounted(){
            //获取参数
            const queryString =window.location.search;
            //     这一步可用获取所有   下面可用分取
            const urlParms = new URLSearchParams(queryString);
            //从查询参数中获取type的值
            const typeValue = urlParms.get('type');
            //type的值就是上面
            if (typeValue == null){
                this.findAll();
            }else{
                this.findBar(typeValue);
            }
        },
        data:{
            // 定义组件的数据属性
            bars:[],
            totalData: [], //分好类的数据直接扔进去  后面分页使用
            // 初始页码
            currentPage: 1,
            // 每页显示的条目数
            pageSize: 9,
            TheUser:{},
        },
        methods:{
            //find所有的论坛
            findAll() {

                // 发送 GET 请求到 "products/findAll" 路径
                axios.get("/bars/getAllBars").then(res => {
                    // 将响应中的数据分别赋值给对应的属性
                    this.bars = res.data; // 将整个响应数据赋值给 products 属性
                    this.totalData = this.bars
                    this.findUser()
                    if (this.bars.length <=9 ){
                        this.pageSize = this.bars.length;
                    }else {

                    }
                }).catch(error => {
                    // 处理请求错误
                    console.error('Error fetching data:', error);
                });
            },
            findBar(typeValue){
                axios.get("bars/findBar",{params:{tid:typeValue}}).then(x=>{
                    this.bars = x.data;
                    this.totalData = this.bars
                    this.findUser()
                    if (this.bars.length <=9 ){
                        this.pageSize = this.bars.length;
                    }else {

                    }
                }).catch(error => {
                    // 处理请求错误
                    console.error('Error fetching data:', error);
                });
            },
            // 处理页码变化的事件
            Page(newPage) {
                this.currentPage = newPage;
                // 更新 tableData 以反映当前页的数据
                this.bars = this.currentTableData;
            },
            //最外层跳转到登录界面   论坛
            goToLogin(bid,uid) {
                if (bid && uid) {
                    console.log(bid+uid)
                    window.top.location.href = `bardetail.html?b=${bid}&u=${uid}`
                }
            },
            //找寻对应的用户所有信息
            findUser(){
                // 在index.html页面加载时读取
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name !=null && this.password !=null){
                    this.isLogin = true;
                }
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                    this.TheUser = x.data;
                })
            },

        },
        computed:{
            currentTableData() {
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                return this.totalData.slice(startIndex, endIndex);
            }
        },
        watch: {
            // 监听 totalData 的变化，更新 tableData
            totalData: {
                immediate: true,
                handler(newVal) {
                    this.tableData = this.currentTableData;
                }
            }
        },

    })
</script>
</body>
</html>